<template>
  <div class="fullMain">
    <x-header :left-options="{backText: '',showBack: false}">{{ groupQRCodePageTitle }}</x-header>
    <div style="height:20px" />
    <div class="QRcode">
      <div class="QRcodeHead">{{groupName}}</div>
      <div style="height:10px" />
      <div v-if="shareLegally" style="text-align:center">
        <img style="height:300px; width:300px" :src="qrcodeURL" />
      </div>
      <div v-else style="text-align:center">
        <img src="~assets/img/bookcycle.jpg" />
      </div>
      <div class="QRcodeBottom">{{remindText}}</div>
    </div>
  </div>
</template>

<script>
import { XHeader } from "vux";
import { mapState, mapActions } from "Vuex";
import { Loading } from "element-ui";
import wx from "api/wx";
import user from "api/user";

export default {
  name: "groupQRCode",
  data() {
    return {
      groupQRCodePageTitle: "群二维码",
      groupId: "",
      groupName: "",
      qrcodeURL: "",
      shareLegally: true,
      remindText: "",
      loadingInstance: null,
    };
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
    }),
    ...mapState(["groupPresent"]),
  },
  mounted() {
    if (this.groupPresent.groupId !== undefined) {
      (this.groupId = this.$store.state.groupPresent.groupId),
        (this.groupName = this.$store.state.groupPresent.detail.groupName);
    }
    this.init();
    this.getScanPicture();
    this.loadingInstance.close();
  },
  components: {
    XHeader,
  },
  methods: {
    init() {
      this.loadingInstance = Loading.service({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.8)",
        customClass: "osloading",
        fullscreen: true,
      });
    },
    getScanPicture() {
      this.remindText = "长按分享此二维码";
      if (undefined !== this.groupPresent.groupId) {
        this.qrcodeURL =
          "http://wechat.wsn2019.club/report/scan?groupId=" +
          this.groupPresent.groupId;
      } else {
        this.groupName = "易享小秘个人助理";
        this.shareLegally = false;
        this.remindText = "扫码进入易享小秘个人助理";
      }
    },
    back() {
      this.$router.go(-1);
    },
    showAlert(alertText) {
      this.isShowAlert = true;
      this.alertText = alertText;
    },
    closeTip() {
      this.isShowAlert = false;
      this.alertText = "";
    },
  },
};
</script>
<style>
.QRcode {
  position: fixed;
  top: 10%;
  width: 100%;
  height: 400px;
  background-color: rgb(237, 237, 237);
  /* padding: 10px; */
}
.QRcodeHead {
  font-size: 26px;
  font-weight: bolder;
  line-height: 40px;
  text-align: center;
}
.QRcodeBottom {
  font-size: 40px;
  font-weight: bolder;
  line-height: 80px;
  text-align: center;
}
.QRcodeImg {
  text-align: center;
}
</style>
